<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>员工列表 </title>
 	<!-- jQuery引入  -->
    <script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
    <!-- bootstrap引入 -->
	<link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- 新增模态框 -->
	<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">员工添加</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal">
	        <div class="form-group">
			    <label class="col-sm-2 control-label">empName</label>
			    <div class="col-sm-10">
			      <input class="form-control" name="empName" id="empName_add_input" placeholder="empName">
			      <span class="help-block"></span>
			    </div>
		  	</div>
	        <div class="form-group">
			    <label class="col-sm-2 control-label">email</label>
			    <div class="col-sm-10">
			      <input class="form-control" name="email" id="email_add_input" placeholder="tyron@tyron.com">
			      <span class="help-block"></span>
			    </div>
		  	</div>
	        <div class="form-group">
			    <label class="col-sm-2 control-label">gender</label>
			    <div class="col-sm-10">
				    <label class="radio-inline">
						 <input type="radio" name="gender" value="M" checked="checked"> 男
					</label>
					<label class="radio-inline">
					  <input type="radio" name="gender" value="F"> 女
					</label>
			    </div>
		  	</div>
		  	<div class="form-group">
			    <label class="col-sm-2 control-label">deptName</label>
			    <div class="col-sm-4">
			      	<select class="form-control" name="dId"></select>
			    </div>
		  	</div>
		  	</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
	      </div>
	    </div>
	  </div>
	</div>

	<!-- 修改模态框 -->
	<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">员工修改</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal">
	        <div class="form-group">
			    <label class="col-sm-2 control-label">empName</label>
			    <div class="col-sm-10">
			     	<p class="form-control-static" id="empName_update_input"></p>
			    </div>
		  	</div>
	        <div class="form-group">
			    <label class="col-sm-2 control-label">email</label>
			    <div class="col-sm-10">
			      <input class="form-control" name="email" id="email_update_input">
			      <span class="help-block"></span>
			    </div>
		  	</div>
	        <div class="form-group">
			    <label class="col-sm-2 control-label">gender</label>
			    <div class="col-sm-10">
				    <label class="radio-inline">
						 <input type="radio" name="gender" value="M" checked="checked"> 男
					</label>
					<label class="radio-inline">
					  <input type="radio" name="gender" value="F"> 女
					</label>
			    </div>
		  	</div>
		  	<div class="form-group">
			    <label class="col-sm-2 control-label">deptName</label>
			    <div class="col-sm-4">
			      	<select class="form-control" name="dId"></select>
			    </div>
		  	</div>
		  	</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
	      </div>
	    </div>
	  </div>
	</div>

	<div class="container">
		<!-- 标题  -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM-CRUD</h1>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-offset-8">
				<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
				<button class="btn btn-danger" id="emp_delete_all">删除</button>
			</div>
		</div>
		
		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="epms_table">
					<thead>
						<tr>
							<th><input type="checkbox" id="check_all"/></th>
							<th>#</th>
							<th>empName</th>
							<th>gender</th>
							<th>email</th>
							<th>deptName</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
		<!-- 分页条 -->
		<div class="row">
			<!-- 分页文字信息 -->
			<div class="col-md-6" id="page_info_area"></div>
			<!-- 分页条信息 -->
			<div class="col-md-6" id="page_nav_area"></div>
		</div>
	</div>
	<script type="text/javascript">
		var totalRecord,currentPage;
		//	1、在页面加载完成后，发送ajax请求获取数据
		$(function() {
			to_page(1);
		});
		
		// 页面跳转
		function to_page(pn){
			$.ajax({
				url : "${APP_PATH}/emps",
				data : "pn=" + pn,
				type : "get",
				success : function(result){
					//console.log(result);
					var pageInfo = result.extend.pageInfo; 
					totalRecord = pageInfo.pages;
					currentPage = pageInfo.pageNum;
					// 1、解析并显示员工数据
					build_emps_table(pageInfo);
					// 2、解析并显示分页信息
					buile_page_info(pageInfo);
					// 3、解析并显示分页条
					buile_page_nav(pageInfo);
				}
			});
		}
		
		// 员工列表
		function build_emps_table(pageInfo){
			// empty() 删除匹配的元素集合中所有的子节点。
			$("#epms_table tbody").empty();
			
			// 数据列表
			var emps = pageInfo.list;
			// jQuery遍历，$.each(Object, [callback])
			$.each(emps, function(index, item){
				// append(content) 返回值:jQuery,向每个匹配的元素内部追加内容。
				var checkBox = $("<td><input type='checkbox' class='check_item'/></td>");
				var empIdTd = $("<td></td>").append(item.empId);
				var empNameTd = $("<td></td>").append(item.empName);
				var genderTd = $("<td></td>").append(item.gender=="M"?"男":"女");
				var emailTd = $("<td></td>").append(item.email);
				var deptNameTd = $("<td></td>").append(item.department.deptName);
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm update_btn")
							.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
				// 为编辑按钮添加ID属性，用于显示员工数据
				editBtn.attr("edit_id", item.empId);
				
				var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
							.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
				// 为删除按钮添加ID属性，用于删除员工数据
				delBtn.attr("delete_id", item.empId);	
							
				var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
				$("<tr></tr>").append(checkBox).append(empIdTd).append(empNameTd)
							.append(genderTd).append(emailTd)
							.append(deptNameTd).append(btnTd).appendTo("#epms_table tbody");
			});
		};

		// 分页信息
		function buile_page_info(pageInfo){
			$("#page_info_area").empty();
			$("#page_info_area").append("当前"+pageInfo.pageNum+"页，总共"+pageInfo.pages+"页，共"+pageInfo.total+"条记录");
		}

		// 分页条
		function buile_page_nav(pageInfo){
			$("#page_nav_area").empty();
			var ul = $("<ul></ul>").addClass("pagination");
			var firstPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append("首页"));
			var prePageLi = $("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("&laquo;")));
			// 判断是否有上一页
			if(pageInfo.hasPreviousPage == false){
				firstPageLi.addClass("disabled");
				ul.append(firstPageLi);
			} else{
				//为元素添加点击翻页的事件
				firstPageLi.click(function(){
					to_page(1);
				});
				prePageLi.click(function(){
					to_page(pageInfo.pageNum -1);
				});
				ul.append(firstPageLi).append(prePageLi);
			}
			// 分页数字迭代
			$.each(pageInfo.navigatepageNums, function(index, item){
				var numLi = $("<li></li>").append($("<a></a>").attr("href","#").append(item));
				// 如果是当前序号则高亮
				if(pageInfo.pageNum == item){
					numLi.addClass("active");
				}
				numLi.click(function(){
					to_page(item);
				});
				ul.append(numLi);
			});
			var nextPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("&raquo;")));
			var lastPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append("末页"));
			// 判断是否有下一页
			if(pageInfo.hasNextPage == false){
				lastPageLi.addClass("disabled");
				ul.append(lastPageLi);
			} else{
				//为元素添加点击翻页的事件
				nextPageLi.click(function(){
					to_page(pageInfo.pageNum +1);
				});
				lastPageLi.click(function(){
					to_page(pageInfo.pages);
				});
				ul.append(nextPageLi).append(lastPageLi);
			}
			$("<nav></nav>").append(ul).appendTo("#page_nav_area");
		};
		
		// 点击“新增”事件
		$("#emp_add_modal_btn").click(function(){
			// 清空下拉框的内容
			$("#empAddModal select").empty();
			// 清空表单内的数据
			$("#empAddModal form")[0].reset();
			// 清空表单中提示框的样式和信息
			$("#empAddModal form").find("*").removeClass("has-success has-error");
			$("#empAddModal form").find(".help-block").text("");
			// 设置部门下拉框
			dept_select("#empAddModal select");
		
			//弹出模态框
			$("#empAddModal").modal({
				backdrop:"static"
			});
		});
		
		// 部门下拉框事件
		function dept_select(ele){
			// 清空部门列表
			$(ele).empty();
		
			$.ajax({
				url : "${APP_PATH}/depts",
				type : "GET",
				success: function(result){
					//console.log(result); 
					var depts = result.extend.depts;
					$.each(depts, function(index, item){
						var optionEle = $("<option></option>").append(item.deptName).attr("value",item.deptId);
						$(ele).append(optionEle);
					});
				}
			});
		}
		
		// 姓名框的服务器端重复性校验
		$("#empName_add_input").change(function(){
			checkName(this.value);
		});

		// 校验用户名重复性，用于填完用户名后校验及保存前校验
		function checkName(name) {
			var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
			if(!regName.test(name)){
				//alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
				show_validate_msg("#empName_add_input", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");
				return false;
			}else{
				show_validate_msg("#empName_add_input", "success", "");
			};
			
			$.ajax({
				url : "${APP_PATH}/checkName",
				data : "empName=" + name,
				type : "POST",
				success : function(result){
					if (result.code == 100) {
						show_validate_msg("#empName_add_input", "success", "用户名可用");
						$("#emp_save_btn").attr("ajax-va","success");
					} else {
						show_validate_msg("#empName_add_input", "error", result.extend.va_msg);
						$("#emp_save_btn").attr("ajax-va","error");
					}
				}
			});
		};

		// 校验邮箱
		function checkEmail(ele){
			var email = $("#email_add_input").val();
			var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
			if (!regEmail.test(email)) {
				/* alert("邮箱格式不正确"); */
				show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
				return false;
			} else {
				show_validate_msg("#email_add_input", "success", "");
			}
		};

		// 点击保存事件
		$("#emp_save_btn").click(function() {
			// 保存前进行校验
			 if (!validate_add_form()) {
				return false;
			}
			
			// 判断之前的ajax用户名校验是否成功
			if($(this).attr("ajax-va")=="error"){
				return false;
			}

			/*alert($("#empAddModal form").serialize());*/
			$.ajax({
				url : "${APP_PATH}/emp",
				type : "POST",
				data : $("#empAddModal form").serialize(),
				success : function(result) {
					alert(result.msg); 
					// 保存成功
					if (result.code == 100){
						// 1、关闭模态框
						$("#empAddModal").modal('hide');
						// 2、显示最后一页
						to_page(totalRecord);
					} else {
						// 显示错误信息
						if(undefined != result.extend.errorFields.email){
							show_validate_msg("#email_add_input", "error", result.extend.errorFields.email);
						}
						if(undefined != result.extend.errorFields.empName){
							show_validate_msg("#empName_add_input", "error", result.extend.errorFields.empName);
						}
					}
				}
			});
		});

		// 保存操作数据校验
		function validate_add_form() {
			// 检验用户名
			var empName = $("#empName_add_input").val();
			checkName(empName);

			// 校验邮箱
			checkEmail("#email_add_input");
			return true;
		};

		// 显示提示消息
		function show_validate_msg(ele, status, msg) {
			//清除当前元素的校验状态
			$(ele).parent().removeClass("has-success has-error");
			$(ele).next("span").text("");
			// 结果判断
			if ("error" == status) {
				$(ele).parent().addClass("has-error");
				$(ele).next("span").text(msg);
			} else if ("success" == status) {
				$(ele).parent().addClass("has-success");
				$(ele).next("span").text(msg);
			}
		};
		
		// 绑定修改事件
		$(document).on("click",".update_btn",function(){
			// 1、设置部门下拉框
			dept_select("#empUpdateModal select");
			
			var editId = $(this).attr("edit_id");

			// 2、获取并设值员工数据
			getEmp(editId);
			
			// 3、将ID设值到更新按钮中，用于数据更新
			$("#emp_update_btn").attr("edit_id", editId);

			//弹出模态框
			$("#empUpdateModal").modal({
				backdrop:"static"
			});
		});
		
		// 获取员工数据
		function getEmp(id){
			$.ajax({
				url : "${APP_PATH}/emp/" + id,
				type : "GET",
				success : function(result){
					empData = result.extend.employee;
					/* alert(empData.empName); */
					// 设值
					$("#empName_update_input").text(empData.empName);
					$("#email_update_input").val(empData.email);
					$("#empUpdateModal input[name=gender]").val([empData.gender]);
					$("#empUpdateModal select").val([empData.dId]);
				}
			});
		};
		
		// 更新事件
		$("#emp_update_btn").click(function(){
			// 邮箱验证
			checkEmail("#email_update_input");
			
			// 提交请求
			$.ajax({
				url : "${APP_PATH}/emp/" + $(this).attr("edit_id"),
				/* type : "POST",
				data : $("#empUpdateModal form").serialize() + "&_method=PUT", */
				type : "PUT",
				data : $("#empUpdateModal form").serialize(),
				success : function (result){
					// alert(result.msg);
					// 关闭模态框
					$("#empUpdateModal").modal('hide');
					
					// 重新加载当前页
					to_page(currentPage);
				}
			});
		});
		
		// 绑定删除按钮事件
		$(document).on("click",".delete_btn",function(){
			// 设置提示信息，确认是否删除
			var empName = $(this).parents("tr").find("td:eq(2)").text();
			var empId = $(this).attr("delete_id");
			// alert(empName);
			if(confirm("确认删除【"+empName+"】吗？")){
				$.ajax({
					url : "${APP_PATH}/emp/" + empId,
					type : "DELETE",
					success : function(result){
						alert(result.msg);
						// 重新加载当前页
						to_page(currentPage);
					}
				});
			}
		});
		
		// 点击“全部”按钮
		$("#check_all").click(function(){
			// 获取全选按钮的状态
			var flag = $("#check_all").prop("checked");
			// 设置每列选择状态与全选状态相同
			$(".check_item").prop("checked", flag);
		});
		
		// 设置每列选择框的事件
		$(document).on("click",".check_item",function(){
			// 获取单选框选中的个数
			var flag = $(".check_item:checked").length == $(".check_item").length;
			// 获取全选按钮的状态
			$("#check_all").prop("checked", flag);
		});
		
		// 点击“删除”全部按钮
		$("#emp_delete_all").click(function(){
			// 设置选中的用户名拼接字符串和ID
			var empNames = "";
			var empIds = "";
			// 获取选中的元素
			$.each($(".check_item:checked"), function(index, item){
				empNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
				empIds += $(this).parents("tr").find("td:eq(1)").text() + "-";
			});
			
			// 删除最后一个拼接字符
			empNames = empNames.substring(0, empNames.length-1);
			empIds = empIds.substring(0, empIds.length-1);
			// 弹出确定框
			if (confirm("确认删除【"+empNames+"】吗？")){
				// 发送ajax请求
				// alert(empIds);
				$.ajax({
					url : "${APP_PATH}/emp/" + empIds,
					type : "DELETE",
					success : function(result){
						alert(result.msg);
						// 重新加载当前页
						to_page(currentPage);
					}
				});
			}
		});
	</script>
</body>
</html>